<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        td{
            width:100px;
            height:20px;
        }
        [v-cloak]{
            display:none;
        }
    </style>
    <script src="../application/vue.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div>
            <label for="name">用户名称：</label>
            <input type="text" id="name" v-model="name">
        </div>
        <div>
            <label for="age">用户年龄：</label>
            <input type="number" id="age" v-model.number="age">
        </div>
        <div>
            <label for="sex">用户性别：</label>
            男：<input type="radio" id="sex" value="男" v-model="gender">
            女：<input type="radio" id="sex" value="女" v-model="gender">
            秘密：<input type="radio" id="sex" value="未知" v-model="gender">
        </div>
        <div>
            <label for="skill">用户技能：</label>
            <select id="skill" v-model="skill">
                <option value="">请选择</option>
                <option value="java">java</option>
                <option value="html">html</option>
                <option value="javascript">javascript</option>
                <option value="vue">vue</option>
            </select>
        </div>
        <input type="button" value="添加新用户" @click="addUser()">
        <hr>
        <table border=1 cellspacing=0 >
            <thead>
                <tr align="center">
                    <td>
                        <input type="checkbox" v-model="selectAll" @change="checkAll()">
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>技能</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr align="center" v-show="userData.length==0">
                    <th colspan="7">暂无数据</th>
                </tr>
                <tr align="center" v-show="userData.length!=0" v-for="(value,index) in userData" :key="value.id">
                    <td>
                        <input type="checkbox" :value="value.id" v-model="selectArr" @change="checkChoose()">
                    </td>
                    <td>{{index+1}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.age}}</td>
                    <td>{{value.gender}}</td>
                    <td>{{value.skill}}</td>
                    <td>
                        <input type="button" value="删除" @click="deleteTr(index)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            name:"",
            age:"",
            gender:"",
            skill:"",
            // userData:[],
            userData: [
                {name:"aaa",age:23,sex:"男",skill:"html",id:45678},
                {name:"bbb",age:23,sex:"男",skill:"vue",id:34567},
                {name:"ccc",age:21,sex:"女",skill:"javascript",id:23456},
                {name:"ddd",age:27,sex:"未知",skill:"java",id:12345}
            ],
            selectArr:[],
            selectAll:false
        },
        methods:{
            addUser(){
                var user={
                    name:this.name,
                    age:this.age,
                    gender:this.gender,
                    skill:this.skill,
                    id:Math.random()
                };
                this.userData.push(user);
                // this.checkAll();    
                this.selectAll=false;          
            },
            deleteTr(e){
                this.userData.splice(e,1);
                // this.selectArr.splice(e,1);
                this.checkChoose();
            },
            checkChoose(){
                if(this.userData.length<=this.selectArr.length){
                    this.selectAll=true;
                    if(this.selectArr.length==0){
                        this.selectAll=false;
                    }
                }else{
                    this.selectAll=false;
                }
            },
            checkAll(){
                if(this.selectAll){
                    for(let i=0,len=this.userData.length;i<len;i++){
                        this.selectArr.push(this.userData[i].id);
                    }
                }else{
                    this.selectArr=[];
                }
            }
        }
    })

</script>

</html>